/*
 * @Description:
 * @version: v0.0.1
 * @Author: ZhouYanPing
 * @Date: 2025-04-06 12:12:05
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-04-06 12:16:04
 */
import { useCallback } from '@lynx-js/react';
import lynxLogo from '../assets/lynx-logo.png';

interface ItemViewProps {
  index: number;
}

export function ItemView({ index }: ItemViewProps) {
  const handleClick = useCallback(() => {
    console.log(`Item ${index} clicked`);
  }, [index]);

  return (
    <view
      className="item-container"
      style={{
        width: '100%',
        height: '100px',
        backgroundColor: '#ffffff',
        borderRadius: '8px',
        padding: '10px',
        marginBottom: '10px',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
      }}
      bindtap={handleClick}
    >
      <image
        src={lynxLogo}
        style={{
          width: '60px',
          height: '60px',
          marginRight: '10px',
        }}
      />
      <view style={{ flex: 1 }}>
        <text style={{ fontSize: '16px', color: '#333333' }}>列表项 {index + 1}</text>
        <text style={{ fontSize: '14px', color: '#666666', marginTop: '4px' }}>这是第 {index + 1} 个列表项的详细描述</text>
      </view>
      <text style={{ color: '#999999', fontSize: '16px' }}>→</text>
    </view>
  );
}
